<template>
  <div>
    <div class="yxp-scene-en" v-if="isBack">
      <div class="close" id="yxp-commp-back11" @click="handleClose"></div>
        <p class="tips">{{title}}</p>
        <div class="btn">
        <div class="btn-item" id="yxp-commp-back13" @click="handleBack">确定</div>
        <div class="btn-item" id="yxp-commp-back14" @click="handleClose">取消</div>
        </div>
    </div>
    <div class="mark" v-if="isBack"></div>
  </div>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: 'ScenePop',
  props: {
    title: {
      type: String,
      default: ''
    },
    isBack: {
      type: Boolean,
      default: false
    },
    types: {
      type: String,
      default: ''
    },
    courseType: {
      type: Number,
      default: 0
    },
    courseId: {
      type: Number,
      default: 0
    },
    modal: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  mounted () {
    // console.log('xxx:',this.$route)
  },
  computed: {
    ...mapState(["ModelXie"],{
    }),
  },
  methods: {
    handleClose () {
      this.$emit('close', false)
    },
    handleBack () {
      switch (this.types) {
        case  '情景植入':
          this.$router.replace({
            path: '/composition/courseList',
            query: {
              userid: this.courseId
            }
          })
              break
        case  '写作模型':
          this.$router.replace({
            path: '/study/writing?ref=homepage',
            query: {
              userid: this.courseId
            }
          })
              break
        default:
          this.$router.replace({
            path: '/study/writing?ref=homepage',
            query: {
              userid: this.courseId
            }
          })
              break
      }
    }
  }
}
</script>
<style scoped>
.yxp-scene-en {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  z-index: 1200;
}
.yxp-scene-en .close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(@/assets/word/close-icon.png) no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}
.yxp-scene-en .close:hover {
  background-image: url(@/assets/word/close-hover.png);
}
.yxp-scene-en .tips {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  line-height: 80px;
  padding: 30px 0;
}
.yxp-scene-en .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 30px;
}
.yxp-scene-en .btn-item {
  width: 130px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #27BFA3;
  border-radius: 100px;
  cursor: pointer;
}
.yxp-scene-en .btn-item:first-child {
  margin-right: 20px;
}
.yxp-scene-en .btn-item:hover {
  background: #18A38A;
}
.mark {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
}
</style>
